<template>
  <div>
    <el-dialog v-if="show" v-dialogDrag :title="title" :visible.sync="show" width="80%" :close-on-click-modal="false" :before-close="close" top="1vh">
      <el-row :gutter="10">
        <el-form ref="elForm" :model="addForm" :rules="rules" size="mini" label-width="100px" label-position="left">
          <el-col :span="8">
            <el-form-item label="数据范围">
              <el-date-picker v-model="sjfwTime" :disabled="true" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{ width: '100%' }" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item>
              <span style="float: right">
                <el-button icon="el-icon-delete" size="mini" type="danger" plain @click="close">关 闭</el-button>
                <el-button :disabled="confirmDisabled" icon="el-icon-plus" size="mini" type="primary" @click="handelConfirm">保 存</el-button>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="24" />
          <el-col :span="8">
            <el-form-item label="责任部门" prop="zrbm">
              <el-row>
                <el-col :span="18">
                  <el-input v-model="addForm.zrbmmc" :disabled="true" :style="{ width: '100%' }" />
                </el-col>
                <el-col :span="6">
                  <el-button class="button-choose tdsbBtn" size="mini" type="primary" plain @click="selectZrbm">
                    选择
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任原因:" prop="tdzrmc">
              <el-row>
                <el-col :span="18">
                  <el-select
                    ref="zryyRef"
                    v-model="addForm.tdzrmc"
                    :style="{ width: '100%' }"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请选择"
                    size="mini"
                    :clearable="false"
                    :remote-method="remoteMethodZryy"
                    :loading="zryyloading"
                    @change="getCheckValueZryy"
                  >
                    <el-option v-for="item in zryyOptions" :key="item.value" :label="item.label" :value="item.value">
                      <span style="float: left">{{ item.label }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                      >{{ item.value }}</span>
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6" class="selectZryy">
                  <el-button class="tdsbBtn" size="mini" type="primary" @click="selectZryy">选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="停电性质" prop="tdxz">
              <el-select v-model="addForm.tdxz" :disabled="tdxzDis" :style="{ width: '100%' }">
                <el-option v-for="item in tdxzArr" :key="item.id" :label="item.tdxz" :value="item.tdxzm" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="停电设备:" prop="tdsbmc">
              <el-row>
                <el-col :span="18">
                  <el-select
                    ref="tdsbRef"
                    v-model="addForm.tdsbmc"
                    :style="{ width: '100%' }"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请选择"
                    size="mini"
                    :clearable="false"
                    :remote-method="remoteMethodTdsb"
                    :loading="tdsbloading"
                    :disabled="addForm.tdzrm == ''"
                    @change="getCheckValueTdsb"
                  >
                    <el-option v-for="item in tdsbOptions" :key="item.value" :label="item.label" :value="item.value">
                      <span style="float: left">{{ item.label }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                      >{{ item.value }}</span>
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6" class="selectTdsb">
                  <el-button class="tdsbBtn" size="mini" type="primary" :disabled="addForm.tdzrm == ''" @click="addGetTdsbbm">选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="技术原因" prop="tdjsmc">
              <el-select v-model="addForm.tdjsmc" :style="{ width: '100%' }" :disabled="!jsyyArr.length" @change="changeTechnicalReasons">
                <el-option v-for="(item, index) in jsyyArr" :key="index" :label="item.tdjsyy" :value="[item]" :disabled="item.disabled" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="特殊分析" prop="fxmc">
              <el-select v-model="addForm.fxmc" :value="tsfxArr[0]" :style="{ width: '100%' }" @change="fxEvent">
                <el-option v-for="(item, index) in tsfxArr" :key="index" :label="item.fxmc" :value="[item.fxbm, item.fxmc]" :disabled="item.disabled" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="起始时间" prop="qssj">
              <el-date-picker
                v-model="timeData.qssj"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                :style="{ width: '100%' }"
                :picker-options="pickerOptions0"
                :clearable="false"
                type="datetime"
                @change="timeRange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="终止时间" prop="zzsj">
              <el-date-picker
                v-model="timeData.zzsj"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                :style="{ width: '100%' }"
                :clearable="false"
                type="datetime"
                @change="timeRange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="持续时间" prop="field184">
              <el-input v-model="addForm.cxsjT" :style="{ width: '100%' }" :disabled="true">
                <template slot="append">小时</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="16">
            <el-form-item label="详细说明">
              <el-input v-model="details" clearable :disabled="true" :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="停电时间同步" prop="tdsjtb">
              <el-checkbox v-model="addForm.checked">同步停电用户</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="备注" class="beizhu" prop="field191">
              <el-input v-model="addForm.comm" clearable :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-divider />
      <div>
        <span class="title_td">停电用户</span>
        <span style="float: right">
          <el-button class="exportBtn" icon="el-icon-plus" type="primary" size="mini" @click="addDataEntry('elForm')">添加</el-button>
          <el-button class="exportBtn" type="warning" size="mini" icon="el-icon-setting" @click="cccEvent('show', cccTable)">列配置</el-button>
        </span>
      </div>

      <div style="margin-top:10px" class="table">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          size="mini"
          :data="dataList"
          height="100%"
          border
          highlight-current-row
        >
          <el-table-column type="selection" align="center" />
          <el-table-column type="index" align="center" label="序号" width="50" />
          <template v-for="col in columnData">
            <el-table-column
              :key="col.id"
              :show-overflow-tooltip="true"
              :prop="col.field"
              :label="col.title"
              :min-width="col.minWidth"
              :align="col.align"
              :header-align="col.align"
              :sortable="col.sortable"
              :fixed="col.fixed"
            />
          </template>
          <el-table-column align="center" fixed="right" label="操作" width="140">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" size="mini" type="primary" @click="modify(scope.row)" />
              <el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteTdyh(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-show="!listLoading" class="pagination-container">
        <el-pagination
          :current-page.sync="paginationList.current"
          :page-size="paginationList.size"
          :page-sizes="[10, 20, 40, 80]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationList.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
    <!-- 选择责任部门编码 -->
    <GetDwbm ref="getDwbmRef" :tree-obj="treeObj" @handleGetDwbm="handleGetDwbm" />
    <!-- 责任原因 -->
    <GetZryybm ref="getZryybmAllRef" @handleGetZryyAll="getCheckValueZryy" />
    <!-- 停电设备 -->
    <GetTdsbbm ref="getTdsbbmRef" @handleGetTdsb="getCheckValueTdsb" />
    <!-- 配置列 -->
    <ccc ref="ccc" />
    <!-- 添加停电用户 -->
    <yxgytdyhAddDialog
      :tdyh-dialog="tdyhDialog"
      :form-data="addForm"
      :data-list="tableDataList"
      :pagination-list="childPaginationList"
      @tdthAddClose="tdthAddClose"
      @userData="userData"
      @childSize="childSize"
      @childCurrent="childCurrent"
    />
    <!-- 修改停电用户 -->
    <yxgytdyhEditDialog
      ref="DialogChange"
      :dialog-change-data-t="dialogChangeData"
      :add-form="addForm"
      :tdyh-edit-dialog="tdyhEditDialog"
      @updateUser="updateUser"
      @handleClose="handleClose"
    />
  </div>
</template>

<script>

import { getZryybmList } from '@/api/dmgl/zryy.js'
import { getTdsbbmList } from '@/api/dmgl/sbbm.js'
import { getUserInfo } from '@/utils/utilInfo.js'
import {
  save,
  tdxzPage,
  clearData,
  tdyhPageData,
  saveAll,
  formDataUpdate,
  getEventData,
  updateChange,
  deleteUserBatch
} from '@/api/sjwh/yxgy'
import { getZcgyyhsjTable } from '@/api/sjwh/zcgy'
import { getSbjsGyPage } from '@/api/dmgl/sbjsgl'
import { getDictCombo } from '@/api/tools/dict'
import GetDwbm from '@/dialogCommom/GetDwbm'
import GetZryybm from '@/dialogCommom/GetZryybmAll'
import GetTdsbbm from '@/dialogCommom/GetTdsbbm'
import ccc from '@/dialogCommom/ccc'
import yxgytdyhAddDialog from './yxgytdyhAddDialog'
import yxgytdyhEditDialog from './yxgytdyhEditDialog'
import { DateDiffHour } from '@/utils/moment.js'
import { dataModulePrefix } from '../../../../config'
export default {
  components: {
    GetDwbm,
    GetZryybm,
    GetTdsbbm,
    ccc,
    yxgytdyhAddDialog,
    yxgytdyhEditDialog
  },
  props: {
    propAddData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      title: '高压停电事件新增',
      dialogChangeData: {}, // 临时用户修改
      tdyhEditDialog: { show: false },
      tdyhDialog: { show: false },
      tableDataList: [], // 用户添加
      show: false,
      sjfwTime: '',
      addForm: {
        bl: 1,
        comm: '', // 备注

        czy: '', // 操作员

        dwbm: '', // 单位编码
        dwmc: '', // 单位名称
        dwxz: '', // 单位性质
        dwxzm: '', // 单位性质码

        fxbm: '', // 特殊分析编码
        fxmc: '', // 分析名称

        id: '', // 保存后的id
        qsm: '', // 全说明 详细说明
        qssj: '', // 起始时间
        zzsj: '',
        cxsj: 0, // 持续时间6
        cxsjT: 0, // 持续时间2

        tcm: 1,
        tdjsm: '', // 停电技术码
        jstjbzm: '', // 技术统计标志码
        tdjsmc: '', // 技术原因

        tdsbm: '', // 设备编码
        tdsbmc: '', // 设备名称
        tjbzm: '', // 设备统计标志码

        tdxz: '', // 停电性质
        tdxzm: '', // 停电性质码

        tdzrm: '', // 停电责任码
        tdzrmc: '', // 停电责任原因
        zrtjbzm: '', // 责任统计标志码

        token: 'string', // 时间

        zrbm: '', // 责任部门
        zrbmmc: '', // 责任部门名称,
        checked: ''
      },
      updateKey: false, // watch
      checked: false, // 停电时间同步
      timeData: { qssj: '', zzsj: '' },
      cccTable: 'yx_gytdyh', // 列配置表名
      columnData: [], // 表头配置
      listLoading: false,
      dataList: [], // 表格数据
      // 停电用户分页
      childPaginationList: { size: 10, current: 1, total: 0 },
      // 时间限制
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      zryyloading: false, // 责任原因模糊搜索时的加载动画
      zryyOptions: [], // 责任原因下拉框数据
      zryylist: [], // 责任原因列表
      zryyData: [], // 责任原因请求接口返回值

      tdxzArr: [], // 停电性质

      tdsbloading: false, // 停电设备模糊搜索时加载动画
      tdsbOptions: [], // 停电设备下拉框数据
      tdsblist: [], // 停电设备列表
      tdsbData: [], // 停电设备请求接口返回值
      jsyyArr: [], // 技术原因
      tsfxArr: [], // 特殊分析
      // 分页组件
      paginationList: {
        size: 10,
        current: 1,
        total: 0
      },
      rules: {
        zrbm: [{ required: true, message: '请选择责任部门', trigger: 'blur' }],
        tdzrmc: [{ required: true, message: '责任原因不能为空', trigger: 'change' }],
        tdxz: [],
        tdsbmc: [{ required: false, message: '停电设备不能为空', trigger: 'change' }],
        tdjsmc: [],
        fxmc: [{ required: true, message: '请选择特殊分析', trigger: 'change' }],
        // tdzrm: [
        //   { required: true, message: '请选择责任原因', trigger: 'blur' }
        // ],
        qssj: [{ required: true, message: '请选择起始时间', trigger: 'change' }],
        zzsj: [{ required: true, message: '请选择终止时间', trigger: 'change' }]
        // tdxzm: [
        //   { required: true, message: '请选择停电性质', trigger: 'blur' }
        // ],
        // tdsbm: [
        //   { validator: checkTdsb, trigger: 'blur' }
        // ],
        // tdjsm: [
        //   { required: true, message: '请选择技术原因', trigger: 'blur' }
        // ],
        // fxbm: [
        //   { required: true, message: '请选择特殊分析', trigger: 'blur' }
        // ],
        // comm: [
        //   { validator: checkComm, trigger: 'blur' }
        // ]
      },
      // 责任部门组件传值
      treeObj: {
        type: 'radio',
        dwbm: ''
      }
    }
  },
  computed: {
    confirmDisabled() {
      let key = true
      if (
        this.dataList.length &&
          this.addForm.sjId &&
          this.addForm.qssj &&
          this.addForm.zzsj
      ) {
        key = false
      }
      return key
    },
    tdxzDis() {
      let key = true
      if (this.tdxzArr.length > 1) {
        key = false
      }
      return key
    },
    details() {
      // eslint-disable-next-line
      this.addForm.qsm = this.addForm.tdzrmc + ' , ' + this.addForm.tdsbmc + ' , ' + this.addForm.tdjsmc
      return this.addForm.qsm
    }
  },
  watch: {
    propAddData: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal.show) {
          this.show = newVal.show
          this.sjfwTime = newVal.sjfw
          this.getZryyList() // 获取责任原因所有数据
          this.getTdsbList() // 获取停电设备所有数据
          this.getTyztCombo() // 获取特殊分析
          this.getUser() // 获取基本数据
          // this.cccEvent('load', this.cccTable) // 列配置
          const treeNode = JSON.parse(sessionStorage.getItem('treeNode'))
          this.addForm.dwbm = treeNode.dwbm
          this.addForm.dwmc = treeNode.dwmc
          this.addForm.dwxz = treeNode.dwxz
          this.addForm.dwxzm = treeNode.dwxzm
          setTimeout(() => {
            this.cccEvent('load', this.cccTable)
          }, 0)
          if (newVal.edit) {
            this.title = '高压停电事件修改'
          }
        } else if (!newVal.show) {
          this.show = newVal.show
        }
      }
    },
    addForm: {
      deep: true,
      handler(a, b) {
        const obj = { sync: '', yxGytdsj: this.addForm }
        this.addForm.checked ? (obj.sync = 1) : (obj.sync = '')
        if (this.addForm.id && this.updateKey) {
          formDataUpdate(obj).then(res => {
          })
        }
      }
    }
  },
  beforeUpdate() {
    if (this.columnData.length) {
      setTimeout(() => {
        this.$refs['multipleTable'].doLayout()
      })
    }
  },
  mounted() {

  },
  methods: {
    async deleteTdyh(item) {
      // 删除
      await deleteUserBatch({
        czy: item.czy,
        sjId: this.addForm.sjId,
        ids: [item.id]
      })
      await this.tdyhData()
    },
    // 修改事件查询回显
    async changeEventData(id) {
      const { data } = await getEventData(id)
      this.addForm = data
      this.addForm.sjId = data.id
      this.addForm.cxsjT = data.cxsj
      this.timeData.qssj = this.addForm.qssj
      this.timeData.zzsj = this.addForm.zzsj
      this.updateKey = true
      await this.tdyhData()
    },
    handleSizeChange(val) {
      this.paginationList.size = val
      this.tdyhData()
    },
    handleCurrentChange(val) {
      this.paginationList.current = val
      this.tdyhData()
    },
    // 关闭停电用户添加弹窗
    tdthAddClose() {
      this.tdyhDialog.show = false
    },
    // 关闭修改弹窗
    updateUser() {
      this.tdyhData()
      this.tdyhEditDialog.show = false
    },
    // 停电用户修改
    modify(item) {
      // 传递到子的值
      this.dialogChangeData = item
      if (
        item.qssj >= this.addForm.qssj ||
        item.zzsj <= this.addForm.zzsj
      ) {
        item.qssj >= this.addForm.qssj
          ? ''
          : (this.dialogChangeData.qssj = this.addForm.qssj)
        item.zzsj <= this.addForm.zzsj
          ? ''
          : (this.dialogChangeData.zzsj = this.addForm.zzsj)
        const num = DateDiffHour(
          this.dialogChangeData.zzsj,
          this.dialogChangeData.qssj
        )
        this.dialogChangeData.cxsj = num
        this.dialogChangeData.cxsjT = Math.round(num * 100) / 100
      }
      this.tdyhEditDialog.show = true
    },
    childSize(val) {
      this.childPaginationList.size = val
      this.getGyyhTable()
    },
    childCurrent(val) {
      this.childPaginationList.current = val
      this.getGyyhTable()
    },
    async userData() {
      // 清空子数据 增加用户体验
      this.tableDataList = []
      this.tdyhData()
    },
    // 停电用户数据
    async tdyhData() {
      const { code, data } = await tdyhPageData({
        dwbm: this.addForm.dwbm,
        sjId: this.addForm.id,
        size: this.paginationList.size,
        current: this.paginationList.current
      })
      if (code === 0) {
        this.tdyhDialog.show = false
        this.dataList = data.records
        this.paginationList.total = data.total
      }
    },
    // 获取导航页参数
    getUser() {
      const obj = JSON.parse(sessionStorage.getItem('treeNode'))
      this.treeObj.dwbm = obj['dwbm']
      this.addForm.czy = getUserInfo.userName
      this.addForm.dwbm = obj.dwbm
      this.addForm.dwmc = obj.dwmc
      this.addForm.dwxz = obj.dwxz
      this.addForm.dwxzm = obj.dwxzm
    },
    // 停电事件添加
    addDataEntry(formData) {
      const self = this
      this.$refs[formData].validate(async valid => {
        if (this.addForm.zzsj > this.addForm.qssj) {
          if (valid) {
            this.tdyhDialog.show = true
            if (!self.addForm.sjId) {
              this.addForm.token = new Date()
              const { data } = await save({ yxGytdsj: self.addForm }) // 获取id
              self.addForm.id = data
              self.addForm.sjId = data
            }
            await this.getGyyhTable()
          }
        } else {
          this.$message.error('起始时间不能大于终止时间')
        }
      })
    },
    getGyyhTable() {
      const self = this
      // 获取高压注册用户
      getZcgyyhsjTable({
        dwbm: self.addForm.zrbm,
        size: self.childPaginationList.size,
        current: self.childPaginationList.current,
        sjId: self.addForm.id,
        qssj: self.addForm.qssj
      }).then(res => {
        self.updateKey = true
        self.childPaginationList.total = res.data.total
        self.tableDataList = res.data.records
      })
    },
    // 列配置
    cccEvent(method, table) {
      if (method === 'show') {
        this.$refs.ccc.show(table)
      } else if (method === 'load') {
        new Promise((resolve, reject) => {
          this.$nextTick(() => {
            resolve(this.$refs.ccc.load(table))
          })
        }).then(response => {
          this.columnData = response
        })
      } else if (method === 'export') {
        const vo = {
          tableCode: table,
          param: this.listQuery,
          url: `${dataModulePrefix}/def-column-user/load`,
          method: 'POST',
          fileName: '高压停电用户数据',
          total: this.total
        }
        this.$refs.ccc.exportExcel(vo)
      }
    },
    // 时间计算
    timeRange(item) {
      this.addForm.qssj = this.timeData.qssj
      this.addForm.zzsj = this.timeData.zzsj
      if (this.addForm.qssj && this.addForm.zzsj) {
        if (this.addForm.zzsj > this.addForm.qssj) {
          const num = DateDiffHour(
            this.addForm.zzsj,
            this.addForm.qssj
          )
          this.addForm.cxsj = num
          this.addForm.cxsjT = Math.round(num * 100) / 100
          this.addForm.cxsj > 12
            ? this.$message({
              message: '停电时间大于12小时',
              type: 'warning'
            })
            : ''
        } else {
          this.$message.error('起始时间不能大于终止时间')
        }
      }
    },
    fxEvent(item) {
      this.addForm.fxmc = item[1]
      this.addForm.fxbm = item[0]
    },
    // 技术原因
    getTyztCombo() {
      getDictCombo({ typeCode: 'dict_tsfx' }).then(res => {
        this.tsfxArr = res.data.map(item => {
          return {
            fxmc: item.text,
            fxbm: item.value
          }
        })
      })
    },
    changeTechnicalReasons(item) {
      this.addForm.tdjsm = item[0].jsfl
      this.addForm.jstjbzm = item[0].sbfl
      this.addForm.tdjsmc = item[0].tdjsyy
    },
    selectZrbm() {
      this.treeObj.dwbm = this.addForm.dwbm
      this.$refs.getDwbmRef.openDwbm()
    },
    handleGetDwbm(item) {
      const reg = /[0-9]+/g
      const str1 = item.label.replace(reg, '')
      this.addForm.zrbmmc = str1.replace(/^\s*/, '')
      this.addForm.zrbm = item.id
    },
    handleClose() {
      this.tdyhEditDialog.show = false
    },
    // 保存
    handelConfirm() {
      if (this.addForm.zzsj > this.addForm.qssj) {
        if (this.propAddData.edit) {
          updateChange({
            czy: this.addForm.czy,
            id: this.addForm.sjId,
            token: this.addForm.token
          }).then(res => {
            this.columnData = []
            this.$emit('successfullySaved')
          })
        } else {
          saveAll({
            czy: this.addForm.czy,
            id: this.addForm.sjId,
            token: this.addForm.token
          }).then(res => {
            this.$emit('successfullySaved')
          })
        }
      } else {
        this.$message.error('起始时间不能大于终止时间')
      }
    },
    close() {
      this.updateKey = false
      if (this.addForm.sjId) {
        clearData({
          czy: this.addForm.czy,
          id: this.addForm.sjId,
          token: this.addForm.token
        }).then(res => {
          this.columnData = []
          // 关闭弹窗 并置空
          this.$emit('tdsjClose')
          this.emptyformDataAll()
        })
      } else {
        this.$emit('tdsjClose')
        this.emptyformDataAll()
      }
    },
    // 清空表单数据
    emptyformDataAll() {
      this.dataList = [] // 表格数据
      this.columnData = [] // 表头数据
      this.addForm.tdzrm = ''
      this.addForm.sjId = ''
      this.addForm.zrbmmc = ''
      this.addForm.cxsjT = ''
      this.addForm.comm = ''
      this.addForm.tdzrmc = ''
      this.addForm.tdsbmc = ''
      this.rules.tdsbmc[0].required = false
      this.$refs['elForm'].resetFields() // 重置表单
      this.timeData.qssj = ''
      this.timeData.zzsj = ''
      this.tdxzArr = [] // 停电性质下拉
      this.jsyyArr = [] // 技术原因
      this.tdsbKey = true
      // this.tsfxArr = [] // 特殊分析
    },
    addGetTdsbbm() {
      this.$refs.getTdsbbmRef.show = true
    },
    /** 停电设备模糊查询 */
    remoteMethodTdsb(query) {
      const that = this
      if (query !== '') {
        that.tdsbloading = true
        setTimeout(() => {
          that.tdsbloading = false
          that.tdsbOptions = that.tdsblist.filter(item => {
            return (
              item.search.toLowerCase().indexOf(query.trim().toLowerCase()) > -1
            )
          })
        }, 200)
      } else {
        that.tdsbOptions = []
      }
    },
    /** 获取停电设备数据 */
    getTdsbList() {
      getTdsbbmList().then(res => {
        const that = this
        const newData = []
        if (res.code === 0) {
          that.tdsbData = res.data

          res.data.forEach(item => {
            const obj = {
              value: item.tdsbm,
              label: item.tdsbmc
            }
            newData.push(obj)
          })

          that.tdsblist = newData.map(item => {
            return {
              value: `${item.value}`,
              label: `${item.label}`,
              search: `${item.value}-${item.label}`
            }
          })
        }
      })
    },
    /** 停电设备下拉框选择  */
    getCheckValueTdsb(val) {
      const filObj = this.tdsbData.filter(item => item.tdsbm === (typeof val === 'object' ? val.tdsbm : val))
      this.addForm.tdsbm = filObj[0].tdsbm
      this.addForm.tdsbmc = filObj[0].tdsbmc
      this.addForm.tjbzm = filObj[0].tjbzm
      getSbjsGyPage({ sbfl: filObj[0].fl }).then(res => {
        this.jsyyArr = res.data.records
      })
      // that.getJsyybmGyTdsb(filObj[0].tdsbm);
    },
    /** 获取责任原因数据 */
    getZryyList() {
      const that = this
      getZryybmList().then((res) => {
        const newData = []
        if (res.code === 0) {
          that.zryyData = res.data
          res.data.forEach(item => {
            const obj = {
              value: item.tdzrm,
              label: item.tdzryy
            }
            newData.push(obj)
          })

          that.zryylist = newData.map((item) => {
            return {
              value: `${item.value}`,
              label: `${item.label}`,
              search: `${item.value}-${item.label}`
            }
          })
        } else {
          that.$message.error(res.message)
        }
      })
    },
    /** 责任原因模糊查询 */
    remoteMethodZryy(query) {
      const that = this
      if (query !== '') {
        that.zryyloading = true
        setTimeout(() => {
          that.zryyloading = false
          that.zryyOptions = that.zryylist.filter((item) => {
            return item.search.toLowerCase().indexOf(query.trim().toLowerCase()) > -1
          })
        }, 200)
      } else {
        that.zryyOptions = []
      }
    },
    /** 责任原因下拉框选择  */
    getCheckValueZryy(val) {
      const that = this
      const filObj = this.zryyData.filter((item) => item.tdzrm === (typeof val === 'object' ? val.tdzrm : val))
      that.addForm.tdzrmc = filObj[0].tdzryy
      that.addForm.zrtjbzm = filObj[0].tjbzm
      that.addForm.tdzrm = filObj[0].tdzrm
      Number(filObj[0].tdzrm) >= 5100
        ? (this.rules.tdsbmc[0].required = true)
        : (this.rules.tdsbmc[0].required = false)
      that.getTdxzbmByBzm(filObj[0].bzm)
    },
    /** 责任原因编码弹窗  */
    selectZryy() {
      this.$refs.getZryybmAllRef.openZryybm()
    },
    /** 责任原因编码弹窗回传 */
    handleGetZryyAll(val) {
      const that = this
      that.zryyOptions = that.zryylist
      that.addForm.tdzrm = val.tdzrm
      that.addForm.tdzrmc = val.tdzryy
      that.addForm.zrtjbzm = val.tjbzm
      that.getTdxzbmByBzm(val.bzm)
    },
    /** 根据责任原因BZM查询停电性质 */
    getTdxzbmByBzm(val) {
      tdxzPage({ tdxzmSearch: val }).then(res => {
        this.tdsbKey = false
        // 停电性质
        this.tdxzArr = res.data.records
        // 默认选中第一个
        this.addForm.tdxz = this.tdxzArr[0].tdxz
        this.addForm.tdxzm = this.tdxzArr[0].tdxzm
      })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body {
  padding-bottom: 5px;
}
/deep/ .el-dialog__header {
  padding: 4px 10px 4px;
}
.el-divider {
  margin: 10px 0;
}
.title_td {
  font-size: 16px;
  font-weight: bold;
}
.el-divider {
  margin: 0;
  margin-bottom: 5px;
}
/deep/ .el-dialog__headerbtn {
  top: 10px;
}
.table {
  height: 200px;
}

/deep/ .el-form-item__label {
  text-align: right;
}

.el-pagination {
  text-align: center;
}
/deep/ .pagination-container {
  margin-top: 5px;
}
.button-choose {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #ffffff !important;
}
.tdsbBtn {
  float: right;
}
</style>
